<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车辆管理页面</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" tppabs="/layui/css/layui.css" media="all">
</head>
<body>

    <div style="width: 80%;text-align: center;margin-left: 10%">

        <div class="layui-main">
            <!-- 表格上方标题 -->
            <blockquote class="layui-elem-quote">用户列表</blockquote>
            <!-- 添加按钮 -->
            <a class="layui-btn layui-btn-sm" id="insert">新增</a>

            <table id="userTable" class="layui-table" lay-data="{url: '/getAllUserByPage', page:true, id:'userTable'}" lay-filter="userTable" >
                <thead>
                    <tr>
                        <th lay-data="{field: 'uid', width: '10%',, align:'center', sort: true, hide:true}">编号</th>
                        <th lay-data="{field: 'name', width: '25%', align:'center'}">用户名</th>
                        <th lay-data="{field: 'tel', width: '20%', align:'center'}">注册电话</th>
                        <th lay-data="{field: 'email', width: '20%', align:'center'}">邮箱</th>
                        <th lay-data="{field: 'invitation', width: '10%', align:'center'}">邀请码</th>
                        <th lay-data="{fixed: 'right', width:'25%', align:'center', toolbar: '#barDemo'}">操作</th>
                    </tr>
                </thead>
            </table>

            <script type="text/html" id="barDemo">
                <a class="layui-btn layui-btn-xs" lay-event="updateUser">修改</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteUser">删除</a>
            </script>
        </div>
    </div>

    <!-- 新增信息 -->
    <div id="insertUser" style="display: none; padding: 20px">
        <form id="insertUserForm" class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" class="layui-input" lay-verify="required" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">注册电话</label>
                <div class="layui-input-block">
                    <input type="tel" name="tel" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" name="repassword" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邀请码</label>
                <div class="layui-input-block">
                    <input type="text" name="invitation" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="insertUserSub">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 修改信息弹出 -->
    <div id="updateUser" style="display: none; padding: 20px">
        <form id="updateUserForm" class="layui-form layui-form-pane" lay-filter="updateUserForm">
            <div class="layui-form-item" style="display: none;">
                <label class="layui-form-label">编号</label>
                <div class="layui-input-block">
                    <input type="text" name="uid" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" class="layui-input" lay-verify="required" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" class="layui-input" lay-verify="required">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="updateUserSub">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <script src="/layui/layui.js" charset="utf-8"></script>

    <script>
        layui.use(['jquery', 'table', 'layer', 'form'], function () {
            // 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
            var $ = layui.$;
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;

            // 显示添加用户弹出层
            $('#insert').click(function() {
                // 每次显示前重置表单
                $('#insertUserForm')[0].reset();
                layer.open({
                    type: 1,
                    title: '添加用户信息',
                    skin: 'layui-layer-molv',
                    area: ['400px'],
                    offset: 'auto',
                    content: $('#insertUser')
                });
            });

            // 新增产品表单提交
            form.on('submit(insertUserSub)', function(data) {
                if (data.field.repassword != data.field.password){
                    layer.msg("两次输入的密码不一致");
                } else {
                    // ajax方式新增产品
                    $.ajax({
                        url: "/saveUser",
                        type: "POST",
                        data: JSON.stringify(data.field),
                        contentType: 'application/json',
                        dataType: 'json',
                        success: function (data) {
                            if (data == 0) {
                                layer.close(layer.index);
                                layer.msg('添加成功');
                                table.reload('userTable');

                            } else {
                                if (data == -1) {
                                    layer.msg('添加失败');
                                } else {
                                    layer.msg('添加失败，用户已存在');
                                }
                            }
                        },
                        error: function () {
                            console.log("ajax error");
                        }
                    });
                }
                // 阻止表单跳转
                return false;
            });

            //监听行工具栏事件，更新产品
            table.on('tool(userTable)', function (obj) {
                //获取当前行数据 以及 lay-event的值
                var data = obj.data;
                var event = obj.event;
                //更新用户方法
                if (event == 'updateUser'){
                    // 显示更新表单前自动为表单填写该行的数据
                    form.val('updateUserForm', {
                        "uid": data.uid,
                        "name": data.name,
                        "email": data.email,
                    });
                    // 显示更新表单的弹出层
                    layer.open({
                        type: 1,
                        title: '更新用户信息',
                        skin: 'layui-layer-molv',
                        area: ['500px'],
                        content: $('#updateUser')
                    });
                    // 更新表单提交
                    form.on('submit(updateUserSub)', function(data) {
                        // ajax方式更新产品
                        $.ajax({
                            url: "/updateUser",
                            type: "POST",
                            data: JSON.stringify(data.field),
                            contentType: 'application/json',
                            dataType: 'json',
                            success: function(data) {
                                if (data) {
                                    layer.close(layer.index);
                                    layer.msg('更新成功');
                                    table.reload('userTable');
                                } else {
                                    layer.msg('更新失败');
                                }
                            },
                            error: function() {
                                console.log("ajax error");
                            }
                        });// 阻止表单跳转
                        return false;
                    });
                }

                // 删除事件
                if (event == 'deleteUser') {
                    layer.confirm('确定删除该用户吗？', function(index) {
                        // ajax方式删除
                        $.ajax({
                            url: '/deleteUser/' + data.uid,
                            type: "DELETE",
                            dataType: 'json',
                            success: function(data) {
                                if (data) {
                                    layer.msg('删除成功');
                                    table.reload('userTable');
                                } else {
                                    layer.msg('删除失败');
                                }
                            },
                            error: function() {
                                console.log("ajax error");
                            }
                        });
                        layer.close(index);
                    });
                }
            });

        });
    </script>

</body>
</html>